<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../resources/css/style.css"/>
    <script type="text/javascript" src="../../resources/js/jquery-2.1.1.js"></script>
    <script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
    <script src="../../resources/js/plugins/layer/layer.js"></script>
    <style>
        .center-vertical { position:absolute; top:50%; transform:translateY(-50%); }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="wrapper animated fadeInRight">
            <div class="row">
<div class="rightMain">
    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <div class="tab-content">
                <div class="tab-pane active" id="super">
                    <div class="ibox float-e-margins">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>外形</h5>
                                    <h5 class="pull-right">评分系数：25%</h5>
                                </div>
                                <div id="ibconA" class="ibox-content collapse in">
                                    <div class="well">
                                        <div class="center-vertical">
                                            品质评价：<span>乌褐油润，金毫显露</span>
                                        </div>
                                        <div>
                                            <div><img class="col-xs-offset-4" src="../../resources/img/teaImg0.jpg" width="150px" alt=""/></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>香气</h5>
                                    <h5 class="pull-right">评分系数：10%</h5>
                                </div>
                                <div id="ibconB" class="ibox-content collapse in">
                                    <p>
                                        品质评价：<span>甜香浓郁</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>滋味</h5>
                                    <h5 class="pull-right">评分系数：30%</h5>
                                </div>
                                <div id="ibconC" class="ibox-content collapse in">
                                    <p>
                                        品质评价：<span>鲜浓醇厚</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>汤色</h5>
                                    <h5 class="pull-right">评分系数：25%</h5>
                                </div>
                                <div id="ibconD" class="ibox-content collapse in">
                                    <div class="well">
                                        <div class="center-vertical">
                                            品质评价：<span>红艳</span>
                                        </div>
                                        <div>
                                            <div><img class="col-xs-offset-4" src="../../resources/img/teaImg3.jpg" width="150px" alt=""/></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>叶底</h5>
                                    <h5 class="pull-right">评分系数：10%</h5>
                                </div>
                                <div id="ibconE" class="ibox-content collapse in">
                                    <div class="well">
                                        <div class="center-vertical">
                                            品质评价：<span>肥嫩多芽，红匀明亮</span>
                                        </div>
                                        <div>
                                            <div><img class="col-xs-offset-4" src="../../resources/img/teaImg4.jpg" width="150px" alt=""/></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="classA">一级</div>
                <div class="tab-pane" id="classB">二级</div>
            </div>
        </div>
                    </div>
                 </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        $('#myTab a:first').tab('show');
        $('#levTab a:first').tab('show');

        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
        $('#levTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
    })
    $('.well img').on('click',function(){
        var src=$(this).attr('src');
        var ahds=src.slice(6);
        parent.parent.layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            area:['600px','400px'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: "<img width='600px' height='400px' src='"+ahds+"'>"
        });
    })
</script>
</html>